<template>
  <div>
    <TodoHeader :addTodo="addTodo" />
    <TodoList :todoList="todoList" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
    <TodoFooter :todoList="todoList" :chooseAll="chooseAll" :delCompleted="delCompleted" />
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoList from './components/TodoList.vue';
import TodoFooter from './components/TodoFooter.vue';

export default {
  name: 'App',
  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  },
  data() {
    return {
      todoList: [
        {
          id: '001',
          title: '吃饭',
          completed: false
        },
        {
          id: '002',
          title: '睡觉',
          completed: false
        },
        {
          id: '003',
          title: '打豆豆',
          completed: false
        }
      ]
    }
  },
  methods: {
    // 新增todo
    addTodo(todo) {
      this.todoList.unshift(todo)
    },
    // 勾选
    checkTodo(id) {
      this.todoList.forEach(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
      })
    },
    // 删除
    deleteTodo(id) {
      this.todoList = this.todoList.filter(todo => {
        return todo.id !== id
      })
    },
    // 全选or全不选
    chooseAll(val) {
      this.todoList.forEach(todo => {
        todo.completed = val
      })
    },
    // 删除已勾选
    delCompleted() {
      this.todoList = this.todoList.filter(todo => {
        return !todo.completed
      })
    }
  }
}
</script>